<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<!-- <navbar title="服务订单"></navbar> -->
		<u-tabs :list="tabsList" :is-scroll="false" :height="80" :active-color="themeColor" :bar-style="{ top: '100%' }" :current="tabsIndex" @change="changeCurrentTab" />

		<view class="order-item">
			<mescroll-uni
				ref="mescrollRef"
				:fixed="false"
				:up="{
					auto: false,
					noMoreSize: 4,
					empty: {
						icon: '/static/images/empty/order.png',
						tip: '暂无记录~',
						fixed: true
					}
				}"
				:down="{ auto: false }"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
			>
				<block>
					<view class="order-contain">
						<view class="order" v-for="(item,index) in lists" :key="index" @click="detail(item.id)">
							<view class="black md  flex row-between">
								<view>姓名：{{item.name}}</view>
								<view style="color: #E0A356;">类型：{{item.type}}</view>
							</view>
							<view class="black md">手机号：{{item.phone}}</view>
							<view class="black md">电梯详情：{{item.content}}</view>
							<view class="muted md">安装地址：{{item.address}}</view>
						</view>
					</view>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import { myGtxqList,gtxqList } from '@/api/user.js';
import OrderMixin from '@/mixins/order';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
export default {
	name: 'OrderList',
	mixins: [OrderMixin, MescrollMixin],
	data() {
		return {
			type:1,
			// Tabs列表
			tabsList: [
				{
					sign: 1,
					name: '待联系'
				},{
					sign: 2,
					name: '跟进中'
				},
				{
					sign: 3,
					name: '已成交'
				},
				{
					sign: 4,
					name: '失败'
				}
			],
			tabsIndex: 0, // Tabs索引
			status:'1',
			lists: [
				// {id:1,order_status:0},
				// {id:2,order_status:1},
				// {id:3,order_status:2}
			]
		};
	},
	methods: {
		// 详情
		detail(id){
			uni.navigateTo({
				url:'/bundle/pages/intention/detail?id='+id
			})
		},
		// 更改当前Tab页
		changeCurrentTab(index) {
			this.tabsIndex = index;
			this.status = this.tabsList[index].sign;
			this.refreshOrderData();
		},

		// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
		refreshOrderData() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},

		// 上拉加载更多
		upCallback({ num, size }) {
			let params = {
				status: this.status,
				page_no: num,
				page_size: size
			}
			if(this.type==1){
				myGtxqList(params).then((res) => {
						if (num == 1) this.lists = []; //如果是第一页需手动置空列表
						this.lists = this.lists.concat(res.lists); //追加新数据
						this.mescroll.endSuccess(res.lists.length, res.count);
					})
					.catch((err) => {
						this.mescroll.endErr()
					});
			}else{
				gtxqList(params).then((res) => {
						if (num == 1) this.lists = []; //如果是第一页需手动置空列表
						this.lists = this.lists.concat(res.lists); //追加新数据
						this.mescroll.endSuccess(res.lists.length, res.count);
					})
					.catch((err) => {
						this.mescroll.endErr()
					});
			}
			
		}
	},

	onLoad(options) {
		this.type = options.type;
	},
	onShow() {
		this.refreshOrderData();
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding: 0;
}
.order-list {
	height: 100%;
	display: flex;
	flex-direction: column;
	.order-item {
		flex: 1;
		min-height: 0;
	}
}
.order-contain {
	padding: 0 20rpx;
}

.order {
	padding: 20rpx;
	margin: 20rpx 0;
	border-radius: 5px;
	background-color: #ffffff;
	line-height: 170%;

	&-header {
		display: flex;
		height: 80rpx;
		align-items: center;
		padding-right: 20rpx;
		border-bottom: $-solid-border;

		.order-tag {
			padding: 4rpx 10rpx;
			margin-right: 10rpx;
			border-radius: 2px;
			font-size: $-font-size-xxs;
			color: #ffffff;

			&--pink {
				background: linear-gradient(#ff369a 0%, #ff2c3c 100%);
			}

			&--red {
				background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
			}

			&--blue {
				background: linear-gradient(#fa6aa9 0%, #fc00bb 100%);
			}

			&--green {
				background: linear-gradient(#0cc21e 0%, #06c160 100%);
			}
		}
		.order-status {
			margin-left: auto;
			font-size: $-font-size-sm;

			&--primary {
				@include font_color();
			}

			&--muted {
				color: $-color-muted;
			}
		}
	}

	&-main {
		padding: 20rpx 0;
		
	}

	&-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 130rpx;
		padding-right: 20rpx;
		border-top: $-solid-border;

		.order-button {
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-radius: 60px;
			font-size: $-font-size-nr;
			position: relative;

			&:nth-child(n + 2) {
				margin-left: 20rpx;
			}

			&--primary {
				@include background_color() color: #ffffff;
			}

			&--normal {
				border-width: 1px;
				border-style: solid;
				@include border_color() @include font_color();
			}

			&--muted {
				border: $-solid-border;
				color: $-color-lighter;
			}
		}
	}
}
</style>
